<!--  -->
<template>
  <div class='padding20 applyResources' ref=''>
    <div class="buttonList" style='border-bottom: 1px solid gray'>
      <el-checkbox-group v-model="buttonValue" @change='buttonValueChange'>
        <el-checkbox-button label="数据资源"></el-checkbox-button>
        <el-checkbox-button label="模型资源"></el-checkbox-button>
        <el-checkbox-button label="硬件资源"></el-checkbox-button>
      </el-checkbox-group>
    </div>
    <div class="search">
      <FormSearch ref="searchFrom" :formItem="searchItem" :formData.sync="searchData" :buttonList="buttonAll.searchList" @clearForm="clearForm" @searchData="search" />
    </div>
    <div v-if='id' style="margin-bottom:10px">
      <el-button type='primary' @click="upDateRe()">更新资源</el-button>
    </div>
    <div class="content">
      <div style='border: 1px solid #bae7ff;background-color:#e6f7ff; padding:5px;margin-bottom:10px'>
        <i class="el-icon-info" style="color:#409EFF;margin-left:10px;margin-right:10px"></i>已申请<span style="">{{multiSelection.length}}</span>项资源 数量已根据拓扑图套数计算 <el-button type='text' @click="title='资源申请列表'">查看详情</el-button>
      </div>
      <Table :list="tableData" :title-list="titleList" :selection="true" :action-list="buttonAll.actionList" @action="action" @SelectionChange="handleSelection">
        <template v-slot:[it.prop]="prop" v-for="(it, index) in titleList.filter((it) => it.slot)">
          <span :key="index">
            <span v-if="it.prop == 'count'">
              <span type='text' style="margin-right:20px;color: rgb(64, 158, 255)">申请</span>
              <el-input-number v-model="prop.data[it.prop]" size='small' :min='1'> </el-input-number>
            </span>
            <span :key="index" v-if="it.prop == 'index'">
              {{prop.index + (searchData.current - 1) * searchData.size + 1 }}
            </span>
          </span>
        </template>
      </Table>
      <Pagination :limit.sync="searchData.pageSize" :page.sync="searchData.currentPage" :total-num="total" class="pagePart" @pagechange="updataPage" />
      <DialogView v-if="title" style="margin-left:20%;" :title-text="title" :appendToBody="true" :btnShow="false" width-num="70%" @close="title=''">
        <template v-slot:main>
          <div class='margintb'>
            <div>数据资源</div>
            <Table :list="multiSelection.filter(it=>it.resType ==1)" :title-list="choseTitleList">
              <template v-slot:[it.prop]="prop" v-for="(it, index) in titleList.filter((it) => it.slot)">
                <span :key="index">
                  <span v-if="it.prop == 'index'">
                    {{prop.index +1}}
                  </span>
                </span>
              </template>
            </Table>
          </div>
          <div class="margintb">
            <div>模型资源</div>
            <Table class='margintb' :list="multiSelection.filter(it=>it.resType ==2)" :title-list="choseTitleList">
              <template v-slot:[it.prop]="prop" v-for="(it, index) in titleList.filter((it) => it.slot)">
                <span :key="index">
                  <span v-if="it.prop == 'index'">
                    {{prop.index +1}}
                  </span>
                </span>
              </template>
            </Table>
          </div>
          <div class="margintb">
            <div>硬件资源</div>
            <Table class='margintb' :list="multiSelection.filter(it=>it.resType ==3)" :title-list="choseTitleList">
              <template v-slot:[it.prop]="prop" v-for="(it, index) in titleList.filter((it) => it.slot)">
                <span :key="index">
                  <span v-if="it.prop == 'index'">
                    {{prop.index +1}}
                  </span>
                </span>
              </template>
            </Table>
          </div>
        </template>
      </DialogView>
    </div>
  </div>
</template>

<script>
import util from "./components/util.js";
import experApi from "../api/exper.service";
export default {
  components: {},
  data() {
    return {
      buttonValue: ["数据资源"],
      ...util.getResource(),
      originTitleList: [],
      total: 0,
      multiSelection: [],
      title: "",
      id: null
    };
  },
  mounted() {
    this.originTitleList = this.titleList;
    this.id = this.$route.query.id;
    this.getPage("dataPage");
    this.experType()
  },
  computed: {},
  watch: {},
  methods: {
    async experType() {
      let { data } = await experApi.experType();
      this.searchItem.find(it => it.prop == "type").list = data.map(it => {
        return {
          label: it.label,
          id: it.value
        };
      });
    },
    async upDateRe() {
      // if(this.)
      if (this.multiSelection.length) {
        let resourceData = this.multiSelection.map(it => {
          return {
            name: it.name,
            resType: it.resType,
            resId: it.id,
            count: it.count,
            expId: this.id
          };
        });
        let data = await experApi.updateResult({ resourceData: resourceData });
        if(data.code = 10200){
          this.$message.success('更新资源成功')
          this.multiSelection = []
        }
      } else {
        this.$message.info("请先选择资源");
      }
    },
    // updat updateResult
    // 操作页码
    updataPage(it) {
      this.searchData.current = it.page;
      this.searchData.size = it.limit;
      this.getDataByButton();
    },
    buttonValueChange(val) {
      this.buttonValue = [val.pop()];
      this.getDataByButton();
    },
    getDataByButton() {
      switch (this.buttonValue[0]) {
        case "数据资源":
          this.titleList = this.originTitleList;
          this.getPage("dataPage");
          break;
        case "模型资源":
          this.titleList = this.moduleTitleList;
          this.getPage("modelPage");
          break;
        case "硬件资源":
          this.titleList = this.hardTitleList;
          this.getPage("hardPage");
          break;
      }
    },
    search() {
      this.getDataByButton();
    },
    clearForm() {
      this.$refs.searchFrom.$refs.formSearch.resetFields();
      this.getDataByButton();
    },
    async getPage(url) {
      let { data } = await experApi[url](this.searchData);
      this.tableData = data.records;
      this.total = data.total;
    },
    apply(data) {
      // console.log(data, "dd");
    },
    handleSelection(val) {
      // console.log(val, "vv");
      this.multiSelection = val;
      this.dataList = this.multiSelection.filter(it => it.resType == 1);
      this.modelList = this.multiSelection.filter(it => it.resType == 2);
      this.hardList = this.multiSelection.filter(it => it.resType == 3);
    },
    // 查看详情
    checkDetai() {}
  },
  created() {}
};
</script>